<template>
  <div>
    {{ out }}
  </div>
</template>
  
<script>
export default {
  name: 'DigitalScroll',
  props: [
    'origin',
    'target',
    'step',
    'duration',
    'isTh'
  ],
  data() {
    return {
      in: null,
      out: 0
    }
  },
  methods: {
    // 千分号
    formatNumberRgx(num) {
      var parts = num.toString().split(".");
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      return parts.join(".");
    },
    addNnumber(target, step, duration) {
      this.in = setInterval(() => {
        this.out = this.out + step
        if (this.out >= target) {
          clearInterval(this.in)
          if (this.isTh) {
            this.out = this.formatNumberRgx(this.target)
          } else {
            this.out = this.target
          }
        }
      }, duration)
    }
  },
  created() {
    this.out = this.origin
    this.addNnumber(this.target, this.step, this.duration)
  }
}
</script>